<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{scenery.name}}-周边景点</block>
		</cu-custom>
		
		<view :style="'height:'+screenHeight+'px;'">
				
				<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
					
					<mescroll-empty v-if="emptyList"></mescroll-empty>
					
					<!-- 列表部分 begin -->
					<view class='grid col-2'>						
						<view v-for="(item,index) in list" v-if="list.length > 0" :key="index" class="padding-xs">
							<view class="cu-list menu-avatar bg-white" @tap="goScenery(item)">								
								<!-- 图片 begin -->
								<bgImg :img="item.img">
									<view class="text-white text-bold text-sm text-cut" style="width:100%;position:absolute;bottom:10rpx;left:15rpx;">										
										<text class="margin-right-xs">
											<text class="cuIcon-locationfill"></text>{{item.distance.toFixed(1)}}公里
										</text>
										{{item.area}} {{item.city}}
									</view>
								</bgImg>
								<!-- 图片 end -->
								
								<!-- 名称 begin -->
								<view class="flex align-center text-content padding-left-sm padding-right-sm text-black">
									<view class="text-cut text-bold">{{item.name}} </view>
								</view>
								<!-- 名称 end -->
								
								<!-- 简评 begin -->
								<view class="margin-top-xs padding-left-sm text-grey text-sm padding-right-sm padding-bottom-xs">
									<text class="margin-right-xs">{{item.shortDescr}}</text>
									<view v-if="item.minPrice==0" class="cu-tag radius sm light bg-green">
										免费
									</view>
									<text v-else class="text-red" style="display: inline-block;">
										<text class="text-xs">花费￥</text>{{item.minPrice}}元
									</text>
								</view>
								<!-- 简评 end -->
								
								<!-- 简评 begin -->
								<view class="flex justify-between padding-left-sm text-gray text-sm padding-right-sm padding-bottom-sm">
									<text>评分:<text :class="'text-'+item.scoreColor">{{roundFun(item.score)}}</text></text>
									<text>收藏:{{item.fav}}</text>
									<text>浏览:{{item.clickStr}}</text>																		
								</view>
								<!-- 简评 end -->
								
							</view>
						</view>						
					</view>
					<!-- 列表部分 end -->
					
				</mescroll-uni>
				<!-- 筛选 end -->
		
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本	
		
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import bgImg from '@/components/img-list/bg-img.vue';
	
	import * as util from "@/common/util.js"
	import {mapGetters} from 'vuex'
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,bgImg
		},
		data() {
			return {
				screenHeight:this.s_h_nob,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无附近景点',
					},
					textNoMore:'-- 没有更多景点 --',
					toTop:{
						offset:500,
						bottom: '300rpx',
					}
				},
				list:[],
			}
		},
		computed:{
			...mapGetters({'scenery':'scenery'}),
		},
		methods: {
			goScenery(item){
				uni.navigateTo({
					url:"/pages/scenery/detail?id="+item.id
				})
			},
			roundFun(value) {
			  return util.roundFun(value,1);
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"p":pageNum,
					"lat":this.scenery.lat,
					"lng":this.scenery.lng
				}				
				_this.$api.post('/scenery/page_point',params).then(res => {
					let data=res.data.data;
					
					let curPageData = data.list;
					let curPageLen=curPageData.length
					let totalSize=data.count;
					
					curPageData.forEach((item)=>{
						item.disColor=util.calColor(item.distance)
					})
					
					if(page.num == 1){
						_this.list = []; //如果是第一页需手动置空列表
						if(curPageData.length>0){
							
							let find=0;
							curPageData.forEach((item,index)=>{
								if(item.id==_this.scenery.id){
									find=index
								}
							})
							
							curPageData.splice(find,1)
							
							totalSize=totalSize-1
							curPageLen=curPageLen-1
						}
					}
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
					
					if(_this.isInit){
						_this.isInit=true;
					}					
				})
			},
		}		
	}
</script>